<template>
    <div class="container">
      <el-card class="ecard">
        <div slot="header" class="clearfix">
          <strong style="font-size: 20px;margin-left: 1%">笔记总览</strong>
            <el-input v-model="inputContent"
                      placeholder="请输入内容" @keyup.native.enter="submit" style="width: 20%;float: right;margin-right: 5%">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="(info,index) in notes " :key="info.noteId">
          <div  @mouseenter="changeShow(index,1)" @mouseleave="changeShow(index,0)" @click="gotoNoteDetail(info.noteId)">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="text">{{info.title.length > 4 ? info.title.substring(0,4) + "..." : info.title}}</span>
                <div class="e-icon" v-show="index == curIndex">
                  <i class="el-icon-upload" style="margin-right:22px;"  @click.stop="share(info)"></i>
                  <i class="el-icon-edit" style="margin-right:22px;" @click.stop="gotoNoteMark(info.noteId)"></i>
                  <i class="el-icon-delete-solid" @click.stop="deleteNote(info.noteId)"></i>
                </div>
              </div>
              <div v-text="render(info.content)">
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
     <div style="margin-top: 26px">
       <el-pagination
           background
           layout="total,prev,pager,next"
           :page-size="12"
           :total="size"
           @current-change="handleCurrentChange"
           @pre-click="handlePrev"
           @next-click="handleNext">
       </el-pagination>
     </div>
      </el-card>
    </div>
</template>
<script>

import {request} from "../../network/request";
import {addShare} from "../../network/Details/share";
export default {
  name: "Notes",
  data(){
    return {
      show:false,
      curIndex:-1,
      size:0,
      notes:[],
      curPage: 0,
      inputContent:'',
      username: window.sessionStorage.getItem("username")
    }
  },
  methods : {
    handleCurrentChange(val) {
     this.curPage = val;
     this.requestPageInfo(val)
    },
    handlePrev(val){
     this.requestPageInfo(val)
    },
    handleNext(val){
     this.requestPageInfo(val)
    }
  ,
    deleteNote(noteId){
      this.$alert('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        callback: action => {
          if(action == 'cancel'){
            this.$message({
              type: 'info',
              message: "取消删除！"
            });
          }else {
            this.confirmDelete(noteId)
          }
        }
      });
    },
    confirmDelete(noteId){
      request({
        url: '/note/' + noteId,
        method: 'delete',
      }).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.requestPageInfo(this.curPage)
      })
    },
    gotoNoteDetail(noteId){
      this.$router.push({
        name:"NoteDetail",
        query:{
          noteId:noteId
        }
      })
    },
    gotoNoteMark(notedId){
      this.$router.push({
        name:"BlogEdit",
        query:{
          noteId:notedId
        }
      })
    },
    changeShow(index,flag){
      this.curIndex = index
      if(flag == 1){
        this.show = true
      }else {
        this.curIndex = -1
        this.show = false
      }
    },
    render(content){
      let MarkdownIt = require("markdown-it")
      let md = new MarkdownIt()
      let text =  md.render(content).replace(/<[^>]+>/g,"")
     return text.length > 6 ? text.substring(0,6) + "..." : text
    },
    share(info){
      addShare( {
        title: info.title,
        content: info.content,
        username: window.sessionStorage.getItem("username")
      }, 'post').then(res => {
      })
      this.$message({
        type: 'success',
        message: '共享成功!'
      });

    },
    requestPageInfo(curPageNum){
      let _this = this;
      if(this.inputContent.length == 0){
      request({
        url: '/note/' + this.username + '/'+ curPageNum + "/12",
        method: 'get',
      }).then(res => {
        _this.notes = res.data.info
        _this.size = res.data.total
      })}else {
        curPageNum =  Math.ceil(curPageNum / 12);
        curPageNum  = curPageNum >= 1 ? curPageNum - 1 :curPageNum
        request({
          url: '/note/'+ this.username + '/' +  _this.inputContent + '/' +  curPageNum + "/12",
          method: 'get',
        }).then(res => {
          console.log(res)
          _this.notes = res.data.info
          _this.size = res.data.total
        })
      }
    },
    submit(){
      this.requestPageInfo(1);
    }

  },
  created() {
    this.requestPageInfo(0)
  },
}
</script>

<style scoped>

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 80%;
  height: 200px;
  margin-top: 6%;
  border-radius: 10px;
  background-color: #FFFFFF;

}
.e-icon{
  float: right;
}
.el-icon-edit:hover,.el-icon-delete-solid:hover {
  color: #409EFF;
}
.text{
  font-size: 20px;
}
.text:hover{
  color: #409EFF;
}
.box-card:hover{
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: #F2F6FC;
}
.container{
  margin-top: 2%;
  max-width: 1600px;
}
</style>
